<!DOCTYPE html>

<html lang="zh-CN">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<title>在线的代码着色器</title>

		<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

		<script type="text/javascript">
			$(document).ready(function(){
				$(".plain-code-slide").click(function(){
					$("#plaincode_panel").slideToggle("slow");
					$(this).toggleClass("active");
				});
				
				{% if rendered_code %}
				$(".html-code-slide").click(function(){
					$("#htmlcode_panel").slideToggle("slow");
					$(this).toggleClass("active");
					//$(this).parents(".panel").animate({ opacity: "hide" }, "slow");	});
				});
				$(".html-code-slide").click();
				$(".plain-code-slide").click();
				{% endif %}
				
				$("#plain_code").keyup(function(){
					if (! $("#realtime").attr("checked")){
						return
					}
					
					$("#status").html("加载中……");

					//alert( $("#showlinenumber").attr("checked") );
					
					$.ajax({
					    url: '/getcodehtml'  ,
					    type: 'POST',
					    
					    data: {
					    	"showlinenumber": $("#showlinenumber").attr("checked"),
					    	"code_lang": $("#code_lang").val(),
					    	"plain_code": $("#plain_code").val(),
					    },

					    timeout: 5000,
					    error: function(){
							$("#rendered_code_div").html("加载页面失败！");
							$("#status").html("加载页面失败");
					    },
					    success: function(html){
							$("#rendered_html_code").val(html);
							$("#rendered_code_div").html(html);
							$("#status").html("就绪");
					    }
					});
				});
				
			});
		</script>
	</head>
	
	<body>

	<script type="text/javascript">
		var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-17147150-1']);
			_gaq.push(['_setDomainName', '.appspot.com']);
			_gaq.push(['_trackPageview']);

		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>
	
	==code_drawer== alpha 4<br>
	The CodeDrawer Team<br>
	<a href="http://code.google.com/p/codedrawer/">项目托管地址</a>
    <form action="/mark" method="post">

		<select class="" name="code_lang" id="code_lang">
			<option value="">请选择对应的语言</option>
			<!--
			<option value="cpp" selected="selected">C++</option>
            <option value="python">python</option>
            -->
            {{ code_renderers }}
        </select>

        <div>

		<div id="plaincode_panel" style="display: block;">
		<br>
			<!-- 下面 textarea 的 cols 属性已经无效了 -->
			<textarea name="plain_code" id="plain_code" rows="12" cols = "60" style="width:90%;margin:5px 0;overflow:auto">{% if not plain_code %}#include &lt;iostream&gt;
using namespace std;

int main()
{
	/* 这里是 C++ 的代码 请在上面语言框中选择 C++ 语言 */
	cout &lt;&lt; &quot;Hello world!&quot; &lt;&lt; endl; //show message

	return 0;
}{% else %}{{ plain_code }}{% endif %}</textarea>
		<br>
		{% if rendered_code %}
			<input type="checkbox" id="realtime" value ="realtime" checked = "checked">实时更新</input><br/>
		{% endif %}
		
		{% if rendered_code %}
			<input type="checkbox" id="showlinenumber" value ="checked" checked = "checked">显示行号</input><br/>
		{% endif %}
		<input type="submit" value="进行标记">
		{% if rendered_code %}
			<a href="javascript:$('#plain_code').keyup()();">进行标记</a>
		{% endif %}
		
		<br>
		</div>
		{% if rendered_code %}
			<p class="plain_code_slide"><a href="javascript:void(0);" class="plain-code-slide active">显示/隐藏原始代码</a></p>
		{% endif %}
		</div>
	</form>
	
	{% if rendered_code %}
		<div id="htmlcode_panel" style="display: block;">
			标记代码：<br>
			<textarea id = "rendered_html_code" name="" rows="12" style="width:90%;margin:5px 0;overflow:auto">{{ rendered_html_code }}</textarea>
			
			</div>
			<p class="html_code_slide"><a href="javascript:void(0);" class="html-code-slide active">显示/隐藏 HTML 代码</a></p>
		</div>
		
		<div id = "status"></div><br/>
		
		<div id = "rendered_code_div" style="font-family: &quot;[object HTMLOptionElement]&quot;,&quot;monospace&quot;; color: rgb(0, 0, 0);">
			{{ rendered_code }}
		</div>
	{% endif %}

	</body>
</html>

